<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>7-Day Registration Growth</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>

<body>
    <div style="width: 600px;height:400px;" id="chart"></div>
    <script>
        var xData = "{$xData}"
        var yData = "{$$yData}"
        xData = xData.split(',')
        yData = yData.split(',')
        var chartDom = document.getElementById('chart');
        var myChart = echarts.init(chartDom);
        var option = {
            title: {
                text: '7-Day Registration Growth'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: xData
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Registration Count',
                    type: 'line',
                    data: yData
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>